<template>
  <div>
      <app-header></app-header>
      <p class="top-text" style="margin-top:44px;">我们向您发送了验证码</p>
      <p class="top-text">请输入验证码</p>
      <P class="note-text">若您没有收到<span>30s后重新发送</span></P>
      <div class="input-box">
          <input type="text" maxlength="4">
          <div class="lines">
              <span></span>
              <span></span>
              <span></span>
              <span></span>
          </div>
      </div>
      <div class="check" style="margin-top:64px;">
          <img src="../assets/check.png" alt="">
          <span>您已阅读并同意《注册协议》</span>
      </div>
      <div class="check">
          <img src="../assets/check.png" alt="">
          <span>您已阅读并同意遵守《共享工具箱协议》</span>
      </div>
      <input type="button" value="完成" class="next">
      <app-footer></app-footer>
  </div>
</template>
<script>
import appHeader from './common/AppHeader'
import appFooter from './common/AppFooter'
export default{
    name:'Login',
    components:{
        appHeader,
        appFooter
    }
}   
</script>
<style scoped>
.top-text{
    width: 230px;
    font-size: 18px;
    color: #272727;
    letter-spacing: 5px;
    line-height: 24px;
    text-align: center;
    margin: 0 auto;
}
.note-text{
    font-size: 12px;
    color: #CBC6C0;
    letter-spacing: 0;
    padding-top: 8px;
    width: 152px;
    display: block;
    margin: 0 auto;
}
.note-text span{
    font-size: 12px;
    color: #ACB4BB;
    text-decoration: underline;
}
.input-box{
    height: 40px;
    padding-top: 40px;
    margin-bottom: 24px;
    width: 224px;
    margin: 0 auto;
}
.input-box input{
    width: 224px;
    border:none;
    font-size: 32px;
    color: #545D61;
    letter-spacing: 38px;
    line-height: 32px;
    text-indent: 18px;
}
.lines{
    height: 2px;
}
.lines span{
    display: block;
    float: left;
    height: 2px;
    width: 40px;
    margin: 8px;
    background: #545D61;
}
.next{
    background: #545D61;;
    height: 44px;
    line-height: 44px;
    width: 270px;
    margin: 0 auto;
    border: none;
    display: block;
    margin-top: 60px;
    font-size: 15px;
    color: #FFFFFF;
    letter-spacing: 4.15px;
}
.check{
    clear: both;
    width: 250px;
    margin: 0 auto;
}
.check img{
    width: 16px;
    height: 16px;
    vertical-align: middle;
}
.check span{
    width: 216px;
    display: inline-block;
    text-align: center;
    font-size: 12px;
    color: #272727;
    letter-spacing: 0;
    line-height: 32px;
    margin-left: 10px;
    text-decoration: underline;
}
</style>
